<template>
  <div id="container">

    <div id="panel"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'approvalMap',
  props:{
    begin:[],
    end:[],
  },
  data(){
    return{
      map: null,

    }
  },
  methods:{
    initMap(a,b){
      AMapLoader.load({
        key:"50772f4c46250195fcc287fd76e4af6c",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.Driving','AMap.Autocomplete','AMap.PlaceSearch'],

      }).then((AMap)=>{
        //初始化地图
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"2D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别
          center:[112.938882,28.228304], //初始化地图中心点位置:长沙
          mapStyle: 'amap://styles/cd16c798718efaea92c34799633b495f',

        });
        let that=this
        AMap.plugin(['AMap.Driving'],()=>{//异步同时加载多个插件
          //初始化路线推荐
          var driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME, // 路线选择策略

            map: that.map,
            panel: 'panel'
          })
          driving.search(a,b,function (status,result){
            if (status === 'complete') {
              console.log("成功"+result)
            }
            else{
              console.log("失败"+result)
            }
          })
        });


      }).catch(e=>{
        console.log(e);
      })
    },




// 实现自定义窗体内容，返回拼接后的字符串



  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap(this.begin,this.end);


  }
}
</script>

<style scoped>
#container{

  padding:0px;
  margin: 0px;
  width: 350px;
  height: 350px;
}
#panel {

  position: absolute;
  background-color: white;
  max-height: 60%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 40%;
  z-index: 99;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>